<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>

  <!-- 

    事件的基本使用：
      1.使用v-on：xxx或@xxx绑定事件，其中xxx是事件名；
      2.事件的回调需要配置在methods对象中， 最终会在vm上；
      3.methods中配置的函数， 不要用箭头函数!否则this就不是vm了；
      4.methods中配置的函数， 都是被Vue所管理的函数， this的指向是vm或组件实例对象；
      5.@click="demo" 和 @click="demo($event)"效果一致， 但后者可以传参；
   -->
  <div id="root">
    <h2>Hello {{name}}</h2>
    <button @click="showInfo1">button1</button>
    <button @click="showInfo2($event, 123)">button2</button>
  </div>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: 'CCC'
      },
      methods: {
        showInfo1() {
          console.log('info1')
        },
        showInfo2(event, number) {
          console.log('info2', event, number)
        }
      }
    })
  </script>
</body>

</html>